<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>深度监视</title>
  </head>

  <body>
    <div id="app">
      <h3>a的值是:{{obj.a}}</h3>
      <button @click="obj.a++">点我让a加一</button>
      <h3>b的值是:{{obj.b}}</h3>
      <button @click="obj.b++">点我让b加一</button>
      <h3>b的值是:{{obj.c.d.e}}</h3>
      <button @click="obj.c.d.e++">点我让b加一</button>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    /* 
    深度监视：
    (1).Vue中的watch默认不监测对象对内部值的改变(一层)
    (2).配置deep:true可以检测对象内部值改变(多层)
    备注:
    (1).Vue自身可以检测对象内部值的改变，但Vue提供的watch默认不可以！
    (2).使用watch时根据数据的具体结构，决定是否采用深度监视。
    */
    const vm = new Vue({
      el: "#app",
      data: {
        obj: {
          'a': 1,
          'b': 2,
          'c': {
            'd': {
              'e': 100
            }
          }
        },
      },
      watch: {
        // 1.监测多级结构中某个属性的变化
        // 如果obj里面有很多属性，这样是行不通的，太多了，不能像下面那样写
        /* 'obj.a': {
          handler(newValue, oldValue) {
            console.log("a的值发生了变化");
          }
        },
        'obj.b': {
          handler() {
            console.log("b的值发生了变化");
          }
        } */
        // 2.监视多级结构中所有属性的变化
        obj: {
          deep: true,
          handler() {
            console.log("obj发生了变化");
          }
        }
      }
    })
  </script>

</html>